<template>
	<view class="recommended-record">
		<NavBar title="历史推荐" :isBack="true"></NavBar>
		<view class="content">
			<view class="box" v-for="(item,index) in historyList" :key="index">
				<view>被推荐人姓名：{{item.name}}</view>
				<view>被推荐人电话：{{item.mobile}}</view>
				<view>被推荐人地址：{{item.address}}</view>
				<view>被推荐人公司名称：{{item.company}}</view>
				<view>推荐时间：{{timestampToTime(item.createtime) }}</view>
	<!-- 			<view class="current-state">
					当前状态：
					<view :class="{'active':index==0}">服务商</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import { serverHistory } from '@/api/services.js'
	import { reactive, toRefs, onMounted } from 'vue'
	import { timestampToTime } from '@/common/index.js'
	const state= reactive({
		historyList:[],
		pageNum:1
	})
 async	function getServerHistoryList(){
		const res=await serverHistory({page:state.pageNum})
		state.historyList=res.data.data
		console.log(res,'res');
	}
	onMounted(()=>{
		getServerHistoryList()
	})
	const { historyList } = toRefs(state)
</script>

<style lang="scss" scoped>
	.recommended-record {
		.content {
			padding: 40rpx 36rpx;
			position: relative;
			top: -35rpx;
			.box {
				padding: 50rpx 36rpx;
				background: #FFFFFF;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 36rpx;
				view{
					margin-bottom: 19rpx;
				}
				.current-state{
					margin: 0rpx;
					display: flex;
					align-items: center;
					.active{
						background: rgba(88,219,207,0.1);
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 1rpx solid #58DBCF;
						color: #58DBCF;
					}
					view{
						margin: 0rpx;
						width: 102rpx;
						height: 38rpx;
						line-height: 40rpx;
						font-weight: 500;
						font-size: 18rpx;
						text-align: center;
						background: rgba(255,0,0,0.1);
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 1rpx solid #FF0000;
						color: #FF0000;
					}
				}
			}
		}
	}
</style>